<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>匿名聊天室</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
</head>
<body>
<link rel="stylesheet" href="/static/css/index.css">
    <div class="title">
        <h1 id="title-1">嘿!陌生人~</h1>
        <h1 id="title-2">圣诞节快乐</h1>
    </div>
    <div class="user-count">
        <h3 id="userCount" hidden>在线总人数:<span ></span></h3>
        <span style="display:none" id="maleCount" >男生人数:<span >20</span></span>
        <span style="display:none" id="femaleCount" >女生人数:<span >20</span></span>
    </div>
    <div class="loading" hidden  id="loading">
        <i class="layui-icon  layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="">&#xe63d;</i>
    </div>
    <div class="start-chat">
        <button type="button" class=" layui-btn layui-btn-primary layui-btn-lg">开始聊天</button>
    </div>
    <!--进度条-->
    <div class="layui-progress " id="progress" lay-filter="demo" lay-showPercent="true">
        <div class="layui-progress-bar" lay-percent="0%"></div>
    </div>
</body>
<form class="layui-form" id="user_form" action="javascript:" hidden>
    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-block">
            <input type="text" name="nick_name" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="mode">
        <label class="layui-form-label">模式</label>
        <div class="layui-input-block">
            <!--<input type="radio" name="mode" title="异性匹配">-->
            <input type="radio" name="mode" title="双人随机匹配" value="1" checked>
            <input type="radio" name="mode" title="多人聊天室" value="2">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="1" title="男" checked>
            <input type="radio" name="sex" value="2" title="女" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
            <input type="checkbox" name="avatar" lay-skin="switch" style="margin-left: 10px;" checked>
            <div class="layui-form-mid layui-word-aux" style="display: inline-block;float:right;width: 205px;" >注:是否使用微信头像</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">定位</label>
        <div class="layui-input-block">
            <input type="checkbox" name="position" lay-skin="switch" style="margin-left: 10px;" checked>
            <div class="layui-form-mid layui-word-aux" style="display: inline-block;float:right;width: 205px;" >注:将展示城市定位</div>
        </div>
    </div>
    <div class="layui-form-item" id="form-submit">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="form">立即匹配</button>
            <button  type="reset" class="layui-btn layui-btn-primary" id="cancle-submit" >取消</button>
        </div>
    </div>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="/static/js/animate.js"></script>
<script src="/static/js/index.js"></script>

<script>
    socketConnect("{{.address}}","{{.port}}");

    // conn.send("")
</script>
</html>